<!-- 猜你喜欢 -->
<template>
    <div class="guess">
        <p class="title">猜你喜欢</p>
        <ul class="item-box">
            <li class="item" v-for="i in list" :key="i.id">
                <img class="item-img" :src="i.imgUrl">
                <p class="item-title">{{i.title}}</p>
                <div class="item-info-box">
                    <span class="item-price">￥<i>{{i.price}}</i></span>
                    <span class="item-sell">{{i.sell}}购买</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeGuess',
  props: ['list'],
  data() {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.guess
	padding 0.4rem 0
	margin 0 0.4rem
	border-top 1px solid #f1f1f1
	.title
		font-size 0.32rem
		color #111111
		font-weight normal
		margin-bottom 0.3rem
		&:before
			content ''
			display inline-block
			height 0.38rem
			width 0.1rem
			background-color #ff9d00
			vertical-align middle
			margin 0 0.15rem 0.05rem 0
	.item-box
		background-color #f6f6f6
		clearfix()
	.item
		float left
		width 49%
		margin-bottom 2%
		background-color #fff
		&:nth-child(odd)
			margin-right 2%
		.item-img
			width 100%
		.item-title
			color $darkTextColor
			font-weight 400
			font-size 0.25rem
			line-height 0.36rem
			margin 0.18rem 0.1rem
			ellipsis_n(2)
		.item-info-box
			margin 0.1rem
			clearfix()
			.item-price
				float left
				color $priceColor
				i
					font-size 0.34rem
			.item-sell
				float right
				color #a5a5a5
</style>
    